<template>
  <div
    class="bi-priority-level-select"
    :class="{'is-viewable': !editable}"
  >
    <template v-if="editable">
      <ui-popover
        v-model="showPopover"
        placement="bottom-start"
        class="bi-priority-level-select__popover"
        :class="{'is-active': showPopover}"
      >
        <span slot="reference" class="bi-priority-level-select__handle" @mouseenter="handleHandleMouseEnter">
          <span
            v-if="currentLevel"
            class="bi-priority-level-select__current"
          >
            <span
              class="bi-priority-level-select__item"
              :style="{'color': currentLevel.color}"
              :class="['is-' + currentLevel.name]"
            >
              <span class="bi-priority-level-select__icon" :style="{'color': currentLevel.color}" />
              <span class="bi-priority-level-select__text">{{ currentLevel.text }}</span>
            </span>
          </span>
          <span v-else class="bi-priority-level-select__placeholder">选择</span>
          <span class="bi-priority-level-select__arrow"></span>
        </span>
        <div class="bi-priority-level-select__main" :style="mainStyle">
          <ul class="bi-priority-level-select__list">
            <li
              v-for="(item, index) in levelOptions"
              :key="index"
              class="bi-priority-level-select__item"
              :class="['is-' + item.name]"
              @click="handleLevelItemClick(item)"
            >
              <span class="bi-priority-level-select__icon" :style="{'color': item.color}" />
              <span class="bi-priority-level-select__text">{{ item.text }}</span>
            </li>
          </ul>
        </div>
      </ui-popover>
    </template>
    <template v-else>
      <template v-if="currentLevel">
        <span
          class="bi-priority-level-select__item"
          :class="['is-' + currentLevel.name]"
          :style="{'color': currentLevel.color}"
        >
          <span class="bi-priority-level-select__icon" :style="{'color': currentLevel.color}" />
          <span class="bi-priority-level-select__text">{{ currentLevel.text }}</span>
        </span>
      </template>
    </template>
  </div>
</template>
<script>
import UiPopover from '../popover'

export default {
  name: 'BiPriorityLevelSelect',
  components: {
    UiPopover
  },
  props: {
    value: {
      type: [String, Number],
      default: ''
    },
    editable: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      showPopover: false,
      mainWidth: null
    }
  },
  computed: {
    levelOptions() {
      return [{
        text: '紧急',
        color: '#f83926',
        name: 'important',
        value: 1
      }, {
        text: '高',
        color: '#f99200',
        name: 'high',
        value: 2
      }, {
        text: '中',
        color: '#fbc900',
        name: 'middle',
        value: 3
      }, {
        text: '低',
        color: '#51ce00',
        name: 'low',
        value: 4
      }]
    },
    currentLevel() {
      /* eslint-disable */
      return this.levelOptions.find(v => v.value == this.value)
      /* eslint-enable */
    },
    mainStyle() {
      const sy = {}
      if (this.mainWidth) {
        sy['min-width'] = this.mainWidth + 'px'
      }
      return sy
    }
  },
  methods: {
    handleHandleMouseEnter(evt) {
      this.mainWidth = evt.target.clientWidth
    },
    handleLevelItemClick(item) {
      this.$emit('input', item.value)
      this.showPopover = false
    }
  }
}
</script>
<style lang="less">
.bi-priority-level-select{
  font-size: 14px;
  display: inline-block;
  vertical-align: top;
  line-height: 1em;
  width: 100%;
  &.is-viewable {
    box-sizing: border-box;
  }
}
.bi-priority-level-select__popover{
  font-size: 14px;
  display: inline-block;
  vertical-align: top;
  line-height: 1em;
  width: 100%;
  &:hover {
    .bi-priority-level-select__handle{
      background-color: #f8f8f9;
      .bi-priority-level-select__arrow{
        opacity: 1;
      }
    }
  }
  &.is-active {
    .bi-priority-level-select__handle{
      background-color: #f8f8f9;
      .bi-priority-level-select__arrow{
        opacity: 1;
        transform: rotate(180deg);
      }
    }
  }
}
.bi-priority-level-select__handle{
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 32px;
  line-height: 32px;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
  padding: 0 36px 0 12px;
  border-radius: 3px;
  transition: all .25s;
  position: relative;
}
.bi-priority-level-select__placeholder{
  color: #999;
}
.bi-priority-level-select__current{
  .bi-priority-level-select__item{
    border-radius: 3px;
    cursor: pointer;
  }
}
.bi-priority-level-select__list{
  list-style: none;
  padding: 6px 0;
  margin: 0;
  .bi-priority-level-select__item{
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 12px;
    padding-right: 12px;
    transition: all .25s;
    cursor: pointer;
    &:hover {
      background-color: #f8f8f9;
    }
  }
}
.bi-priority-level-select__item{
  height: 24px;
  line-height: 24px;
  padding-top: 4px;
  padding-bottom: 4px;
  transition: all .25s;
  display: flex;
  flex-direction: row;
  align-items: center;
  &.is-important {
    .bi-priority-level-select__icon:before {
      content: '';
      position: absolute;
      left: 6px;
      top: 5px;
      border: 6px solid #fff;
      border-left-color: transparent;
      border-right-color: transparent;
      border-top: 0;
    }
    .bi-priority-level-select__icon:after {
      content: '';
      display: block;
      position: absolute;
      left: 10px;
      top: 10px;
      width: 4px;
      height: 8px;
      background-color: #fff;
    }
  }
  &.is-high {
    .bi-priority-level-select__icon:before {
      content: '';
      position: absolute;
      left: 6px;
      top: 8px;
      border: 6px solid #fff;
      border-left-color: transparent;
      border-right-color: transparent;
      border-top: 0;
    }
  }
  &.is-middle {
    .bi-priority-level-select__icon:after {
      content: '';
      position: absolute;
      height: 4px;
      width: 10px;
      background-color: #fff;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
  &.is-low {
    .bi-priority-level-select__icon:before {
      content: '';
      position: absolute;
      left: 6px;
      top: 10px;
      border: 6px solid #fff;
      border-left-color: transparent;
      border-right-color: transparent;
      border-bottom: 0;
    }
  }
}
.bi-priority-level-select__icon{
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: currentColor;
  margin-right: 6px;
  position: relative;
}
.bi-priority-level-select__arrow{
  display: inline-block;
  width: 10px;
  height: 10px;
  position: absolute;
  top: 11px;
  right: 12px;
  &:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 2px;
    width: 5px;
    transform: rotate(45deg) translate(-50%, -50%);
    height: 5px;
    border: 1px solid #999;
    border-left: 0;
    border-top: 0;
  }
  opacity: 0;
  margin-left: 12px;
  transition: all .25s;
  transform: rotate(0deg);
}
</style>
